<template>
    <el-form-item 
        :required="required" 
        :label-width="labelWidth">
        <template #label>
            <div style="display: flex; justify-content: flex-start; align-items: center;">
                <div>
                    {{ label }}
                </div>
                <el-popover
                    v-if="help"
                    title="帮助提示"
                    :content="help"
                    width="500px"
                    placement="top">
                    <template #reference>
                        <el-icon size="16" style="padding-left: 3px;"><Warning /></el-icon>
                    </template>
                </el-popover>
            </div>
        </template>
        <el-time-picker 
            v-model="datetimes" 
            placeholder="请选择时间信息" 
            format="HH:mm:ss"
            value-format="x"
            style="width: 100%;"/>
    </el-form-item>
</template>
<script>
import dayjs from 'dayjs'
export default {
    data() {
        return {
            selfs: false,
            datetimes: 0,
        }
    },
    watch: {
        // 本地值变更
        datetimes(val) {
            // 更新锁
            if(!this.selfs){
                this.selfs = true
                setTimeout(() => {
                    this.selfs = false
                }, 100);
            }
            switch(this.type) {
                case 'unix':
                    this.$emit('update:modelValue', this.datetimes/1000)
                    break
                case 'timestamp':
                    this.$emit('update:modelValue', this.datetimes)
                    break
                case 'time':
                    this.$emit('update:modelValue', dayjs.unix(this.datetimes/1000).format('HH:mm:ss'))
                    break
                default:
                    this.$emit('update:modelValue', this.datetimes)
                    break
            }
        },
        // 输入值变更
        modelValue(val) {
            if(this.selfs){
                return
            }
            switch(this.type) {
                case 'unix':
                    this.datetimes = val*1000
                    break
                case 'timestamp':
                    this.datetimes = val
                    break
                case 'time':
                    this.datetimes = dayjs(val).unix()*1000
                    break
                default:
                    this.datetimes = val
                    break
            }
        },
    },
    props: {
        // 标签名称
        label: {
            type: String,
            default: ''
        },
        // 标签宽度
        labelWidth: {
            type: String,
            default: '120px'
        },
        // 帮助信息，显示在左侧label旁边出现一个帮助图标
        help: {
            type: String,
            default: ''
        },
        // 绑定的输入值信息
        modelValue: {
            type: [String, Number, Boolean, Array, Object, null],
            default: ''
        },
        // 是否显示必填的红色星号*
        required: {
            type: Boolean,
            default: false
        },
        // 返回的时间类型，允许值有以下几种
        // unix：返回unix时间戳
        // timestamp：返回JS时间戳(unix时间戳*1000的值)
        // time：返回格式化后的时间字符串(hh:mm:ss格式)
        type: {
            type: String,
            default: 'unix'
        },
    },
    emits: ['update:modelValue'],
}
</script>